export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    handler: {
      type: Function,
      default: i => i
    },
    columns: {
      type: Array,
      default: () => []
    },
    event: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  methods: {
    createColum(option) {
      const { group = [], header, render, fatter, format, ...config } = option
      if (group.length) {
        return (
          <el-table-column props={config}>
            {group.map(i => this.createColum(i))}
          </el-table-column>
        )
      }
      const slots = {}
      if (fatter) {
        slots.default = props => fatter(props)
      }
      if (render) {
        slots.default = props => render(h, props)
      }
      if (header) {
        slots.header = props => header(h, props)
      }
      return <el-table-column props={config} scopedSlots={slots} />;
    },
  },
  render() {
    const { pagination, filter, ...attrs } = this.$attrs
    const props = { border: true, ...attrs }
    return (
      <el-table data={this.handler(this.data)} props={props} on={this.event.table}>
        {this.columns.map(i => this.createColum(i))}
      </el-table>
    )
  }
}